<script setup lang="ts">
import { toRaw } from 'vue'
import {
  CaretBottom,
  CaretTop,
  CopyDocument,
  Delete,
  Document,
  DocumentAdd,
  DocumentCopy
} from '@element-plus/icons-vue'

const props = defineProps(['page', 'hoveredNode', 'selectedNode', 'controls'])
const emit = defineEmits(['hoverNode', 'selectNode'])

const allowDrop = (draggingNode, dropNode, type) => {
  if (type == 'inner') return dropNode.data.isContainerNode
  else if (dropNode.data.isNPage) return false
  else return true
}

const onNodeDrop = (node, refNode, type) => {
  if (type == 'inner') node.data.parent = refNode.data
  else node.data.parent = refNode.data.parent
}

const moveBefore = (e, data) => props.controls?.moveBefore(e, data)
const moveAfter = (e, data) => props.controls?.moveAfter(e, data)
const copyNode = (e, data) => props.controls?.copyNode(e, data)
const cloneNode = (e, data) => props.controls?.cloneNode(e, data)
const pasteNode = (e, data) => props.controls?.pasteNode(e, data)
const pasteNodeParams = (e, data) => props.controls?.pasteNodeParams(e, data)
const removeNode = (e, data) => props.controls?.removeNode(e, data)
</script>

<template>
  <!-- ElTree宽度无法撑开，需设置宽度 -->
  <ElTree
    v-memo="[page]"
    style="width: 500px"
    :data="[page]"
    :props="{ label: 'name' }"
    node-key="uuid"
    :expand-on-click-node="false"
    default-expand-all
    draggable
    :allow-drop="allowDrop"
    @node-drop="onNodeDrop"
  >
    <template #default="{ node, data }">
      <div
        class="n-tree-node"
        :class="{
          hovered: hoveredNode?.uuid == data.uuid,
          selected: selectedNode?.uuid == data.uuid
        }"
        style="flex: 1"
        @mouseover="emit('hoverNode', { targetNode: toRaw(data) })"
        @click="emit('selectNode', { targetNode: toRaw(data) })"
      >
        <span>{{ node.label }}</span>

        <div v-if="hoveredNode?.uuid == data.uuid">
          <div
            class="button"
            :style="{ display: data.isNPage ? 'none' : 'initial' }"
            @pointerdown="moveBefore($event, data)"
          >
            <ElTooltip content="上移" effect="light" :teleported="false" :hide-after="0">
              <ElIcon :size="13" color="#08f">
                <CaretTop></CaretTop>
              </ElIcon>
            </ElTooltip>
          </div>
          <div
            class="button"
            :style="{ display: data.isNPage ? 'none' : 'initial' }"
            @pointerdown="moveAfter($event, data)"
          >
            <ElTooltip content="下移" effect="light" :teleported="false" :hide-after="0">
              <ElIcon :size="13" color="#08f">
                <CaretBottom></CaretBottom>
              </ElIcon>
            </ElTooltip>
          </div>
          <div
            class="button"
            :style="{ display: data.isNPage ? 'none' : 'initial' }"
            @pointerdown="cloneNode($event, data)"
          >
            <ElTooltip content="克隆" effect="light" :teleported="false" :hide-after="0">
              <ElIcon :size="13" color="#a50">
                <DocumentCopy></DocumentCopy>
              </ElIcon>
            </ElTooltip>
          </div>
          <div class="button" @pointerdown="pasteNodeParams($event, data)">
            <ElTooltip content="粘贴参数" effect="light" :teleported="false" :hide-after="0">
              <ElIcon :size="13" color="#a50">
                <Document></Document>
              </ElIcon>
            </ElTooltip>
          </div>
          <div class="button" @pointerdown="copyNode($event, data)">
            <ElTooltip content="复制" effect="light" :teleported="false" :hide-after="0">
              <ElIcon :size="13" color="#a50">
                <CopyDocument></CopyDocument>
              </ElIcon>
            </ElTooltip>
          </div>
          <div class="button" @pointerdown="pasteNode($event, data)">
            <ElTooltip content="粘贴" effect="light" :teleported="false" :hide-after="0">
              <ElIcon :size="13" color="#a50">
                <DocumentAdd> </DocumentAdd>
              </ElIcon>
            </ElTooltip>
          </div>
          <div
            class="button"
            :style="{ display: data.isNPage ? 'none' : 'initial' }"
            @pointerdown="removeNode($event, data)"
          >
            <ElTooltip content="删除" effect="light" :teleported="false" :hide-after="0">
              <ElIcon :size="13" color="#a00">
                <Delete></Delete>
              </ElIcon>
            </ElTooltip>
          </div>
        </div>
      </div>
    </template>
  </ElTree>
</template>

<style scoped>
:deep(.el-tree-node.is-current > .el-tree-node__content),
:deep(.el-tree-node:focus > .el-tree-node__content),
:deep(.el-tree-node__content:hover) {
  background-color: transparent;
}

.n-tree-node {
  user-select: none;
  padding: 2px 5px;
  display: flex;
}

.hovered {
  background-color: var(--color-3);
}

.selected {
  background-color: var(--color-4);
}

.button {
  display: inline-block;
  cursor: pointer;
  color: var(--color-12);
  margin: 2px;
}

.button :deep(.el-icon:hover) {
  filter: brightness(2);
}
</style>
